<template>
  <div class="pinfo">
    <el-card class="box-card">
        <!-- 搜索区域 -->
    <div class="handle-box">
      <el-input v-model="input" placeholder="请输入考生号" class="handle-input mr10"></el-input>
      <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
    </div>
            <!-- 右侧 -->
            <div style="width: 70%;float: right;">
                <el-descriptions :column="2" border>
                    <el-descriptions-item
                        label="姓名"
                        label-align="center"
                        align="center"
                        label-class-name="my-label"
                        class-name="my-content"
                        width="120px"
                    >{{this.userInfo.name}}</el-descriptions-item>
                    <el-descriptions-item label="性别" label-align="center" align="center" width="200px">{{this.userInfo.sex}}</el-descriptions-item>
                    <el-descriptions-item label="电话号码" label-align="center" align="center">{{this.userInfo.phone}}</el-descriptions-item>
                    <el-descriptions-item label="身份证号" label-align="center" align="center">{{this.userInfo.identity}}</el-descriptions-item>
                    <el-descriptions-item label="年级" label-align="center" align="center">2019</el-descriptions-item>
                    <el-descriptions-item label="入学年份" label-align="center" align="center">2019.9</el-descriptions-item>
                    <el-descriptions-item label="毕业年份" label-align="center" align="center">2023.6</el-descriptions-item>
                    <el-descriptions-item label="政治面貌" label-align="center" align="center">{{this.userInfo.political}}</el-descriptions-item>
                    <el-descriptions-item label="学院" label-align="center" align="center">{{this.userInfo.college}}</el-descriptions-item>
                    <el-descriptions-item label="专业" label-align="center" align="center">{{this.userInfo.major}}</el-descriptions-item>
                    <el-descriptions-item label="班级" label-align="center" align="center">{{this.userInfo.classes}}</el-descriptions-item>
					<el-descriptions-item label="困难申请状态" label-align="center" align="center">
                    <el-tag :type="this.hardship.type">{{this.hardship.text}}</el-tag>
                    </el-descriptions-item>
                </el-descriptions>
                <el-button class="button" type="primary" @click="handleDo">绿色通道办理</el-button>
            </div>
            <!-- 左侧 -->
            <div style="width: 23%; height: 150px; float:left; margin-top: 0px; margin-right: 10px; margin-left: 30px;">
                <img style="width: 55%; height: 100%" src="../../assets/img/img.jpg" >
            <el-table :data="tableData" border stripe>
            <el-table-column label="事项" prop="thing" align="center"/>
            <el-table-column label="状态" align="center">
            <template #default="scope">
                        <el-tag :type="
                                scope.row.state === '已完成'
                                    ? 'success'
                                    : scope.row.state === '未完成'
                                    ? 'danger'
                                    : ''
                            ">{{ scope.row.state }}</el-tag>
                    </template>
            </el-table-column>
          </el-table>
            </div>
        <!-- 对话框 -->
        <el-dialog v-model="dialogTableVisible" title="绿色通道办理"  width="30%" center>
      <span>确定进行绿色通道办理</span>
      <template #footer>
        <el-button type="primary" @click="bedroomDo">确 定</el-button>
        <el-button @click="dialogTableVisible = false">取 消</el-button>
      </template>
    </el-dialog>
    </el-card>
  </div>
</template>

<script>
import request from '../../utils/request'
import { ElMessage } from 'element-plus';

export default {
	data() {
		return {
			input: '',
			userNumber: {
				userName: '',
			},
			userInfo: {},
			birthday: '',
			tableData: [
				{
					thing: '入住办理',
					state: ''
				},
				{
					thing: '现场缴费',
					state: ''
				},
				{
					thing: '院系报到',
					state: ''
				},
				{
					thing: '绿色通道办理',
					state: ''
				},
				{
					thing: '生活用品办理',
					state: ''
				},
			],
			dialogTableVisible: false,
			hardship: {
				type: '',
				text: '',
			},
			userName: {
				userName: '',
			},
		}
	},
	methods: {
		handleSearch() {
			if (this.input) {
				this.userNumber.userName = this.input
				request.post('/api/user/select',this.userNumber).then(res => {
					if (res.code === 400) {
						ElMessage.error('不存在该新生！');
						return
					}
	            this.userInfo = res.data;
					this.getHardship();
			    this.birthday = res.data.identity.substring(6, 10) + '-' + res.data.identity.substring(10, 12) + '-' + res.data.identity.substring(12, 14);
		    })
				request.post('/api/user/get-state',this.userNumber).then(res =>{
					if (res.data.checkIn === true) {
						this.tableData[0].state = '已完成'
					} else {
						this.tableData[0].state = '未完成'
					}
					if (res.data.pay === true) {
						this.tableData[1].state = '已完成'
					} else {
						this.tableData[1].state = '未完成'
					}
					if (res.data.application === true) {
						this.tableData[2].state = '已完成'
					} else {
						this.tableData[2].state = '未完成'
					}
					if (res.data.lessPay === true) {
						this.tableData[3].state = '已完成'
					} else {
						this.tableData[3].state = '未完成'
					}
					if (res.data.use === true) {
						this.tableData[4].state = '已完成'
					} else {
						this.tableData[4].state = '未完成'
					}
				})
			} else {
				ElMessage.error('请输入考生号!');
			}
		},
		handleDo() {
			if (this.input) {
				if (this.tableData[3].state === '已完成') {
					ElMessage.error('该生已办理');
				} else {
					this.dialogTableVisible = true
				}
			} else {
				ElMessage.error('请输入考生号!');
			}
		},
		getHardship() {
			this.userName.userName = this.userInfo.userName
			request.post('/api/lesspay/flag',this.userName).then(res => {
				if (res.data === 1) {
					this.hardship.type = 'success'
					this.hardship.text = '已通过'
				}
				if (res.data === 0) {
					this.hardship.type = 'warning'
					this.hardship.text = '未审核'
				}
				if (res.data === -1) {
					this.hardship.type = 'danger'
					this.hardship.text = '未通过'
				}
				if (res.data === 2) {
					this.hardship.type = ''
					this.hardship.text = '未申请'
				}
			})
		},
		bedroomDo() {
			request.post('/api/user-less-pay/do',this.userNumber).then(res => {
				if (res.code === 1) {
					this.tableData[3].state = '已完成';
					this.dialogTableVisible = false;
					ElMessage.success('办理成功');
				}
			})
		}
	},
}
</script>

<style lang="less" scoped>
.pinfo {
    width: 100%;
    height: 100%;
    margin: auto;
}

.el-descriptions__body table td.is-right, .el-descriptions__body table th.is-right{
    text-align: center !important;
}

tr {
    height: 100px;
}

.box-card {
    width: 100%;
    height: 100%;
}

.mr10 {
    margin-right: 10px;
}

.handle-box {
    margin-bottom: 10px;
    text-align:left;
}


.handle-input {
    width: 300px;
    display: inline-block;
}

.button{
    margin-top: 60px;
}
</style>
